<template>
    <div class="hot-box">
        <van-nav-bar title="人气商品" 
            @click="router.push('/home')"
            left-arrow>
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-tabs  swipeable line-color="92da76">
            <van-tab title="手办" >
                <handler class="item"></handler>
            </van-tab>
            <van-tab title="游戏" >
                <games class="item"></games>
            </van-tab>
            <van-tab title="周边" >
                <around class="item"></around>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script lang="ts" setup>
// import { ref } from "vue";
import { useRouter } from 'vue-router';
import Around from './Around.vue';
import Games from './Games.vue';
import Handler from './Handler.vue';
const router = useRouter()
// const active = ref(0)
</script>

<style lang="less" scoped>
@import url('../../../style/comon.less');
.hot-box{
    display: block;
    position: relative;
    height: 100%;
    background-color: @g1;
    &::v-deep .van-nav-bar__content{
        height: 40px;
        position: sticky;
        top: 0;
    }
    &::v-deep .van-icon{
        color: @g8;
        font-size: 1rem;
    }
    .item{
        height: calc(100vh - 84px);
    }
}
::v-deep .van-tabs__nav--line{
    background-color: @g2;
}
::v-deep .van-tabs__line{
    background-color: #8fec38;
}
</style>